<template>
	<!-- 图书信息 -->
	<view class="content" @touchmove="touchMove">
		<!-- 封面 标题作者 -->
		<view class="top">
			<img id="img" :src="getFullImg(book)" alt="" />
			<view class="title">
				{{book.title}}
			</view>
			<view class="author">
				<img id="avator" :src="author.img" alt="" />
				{{book.author}}
				<label for="" style="background-color: #cfc8b6;border-radius: 20px;">+关注</label>
			</view>
		</view>
		<!-- 评分 阅读人数 字数 -->
		<view class="mid">
			<uni-row :width="nvueWidth" class="demo-uni-row">
				<uni-col :span="8">
					<view style="font-weight: 900;">
						暂无评分
						<view style="font-size: 12px;color: #b9b3a1;">评分人数不足 ></view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="font-weight: 900;">
						7.3万人
						<view style="font-size: 12px;color: #b9b3a1;">正在阅读</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view style="font-weight: 900;">
						10.5万字
						<view style="font-size: 12px;color: #b9b3a1;">连续更新12天</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 简介  分类 -->
		<view class="desc">
			<view>
				<label style="color: #442d0d;font-weight: 900;">简介</label>
				<label class="tag">番茄原创</label>
				<label class="tag">都市高武</label>
				<label class="tag">都市</label>
				<label class="tag">穿越</label>
			</view>
			<view class="text-container">
				<text class="clamp-text" @click="showDetail">{{ book.description }}</text>
				<text class="view-detail" style="color: #457AE6;font-size: 25rpx;" @click="showDetail">更多...</text>
			</view>
		</view>
		<!-- 评论 -->
		<view class="end">
			<view>
				<label style="font-size: 30rpx;color: #3e2e0d;font-weight: 900;">热门书评</label>
				<label style="font-size: 30rpx;float: right;color: #457AE6;">更多书评</label>
			</view>
			<view class="commons">
				<view v-for="(item,index) in commons" :key="index" class="common" >
					<uni-row class="demo-uni-row" >
						<uni-col :span="2">
							<img :src="item.img" alt="" class="avator" />
						</uni-col>
						<uni-col :span="22">
							<view  class = "clamp-text" style="font-size: 25rpx;">{{item.common}}</view>
							<view >
								<uni-rate :readonly="true" :value="item.rate" activeColor="#716147" size="12" style="display: inline-block;"/>
								<label style="margin-left: 10rpx;font-size: 15rpx;">阅读{{getShowTime(item.readTime)}}点评</label>
							</view>
						</uni-col>
					</uni-row>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as request from '@/api/request';
	export default {
		name: "book",
		data() {
			return {
				// 当前图书id
				currBookId: -1,
				book: {
					'img': 'https://www.bigee.cc/bookimg/6/6664.jpg',
					'type': 'novel',
					'title': '一个职业经理人beta的圈钱血泪史（ABO/NP）',
					'description': '职业经理人程屿代替生病的小少爷出任代理CEO，在生产抑制剂的准上市公司兢兢业业，为了圈钱还债而奋斗，却屡战屡败，屡败屡战的故事。本文又名《一场商业会谈引发的轮奸》《为了期权掉的节操迟早',
					'image': 'https://www.bigee.cc/bookimg/180/180976.jpg',
					'category': '女生频道',
					'author': 'xmrj',
					'book_name': '一个职业经理人beta的圈钱血泪史（ABO/NP）',
					'read_url': 'https://www.bigee.cc/book/185469/',
					'url': 'https://www.bigee.cc/book/185469/',
					'status': '已经完本',
					'update_time': '2024-02-26 06:09:34',
					'latest_chapter_name': '50吵醒室友（道具）轻微tr',
					'latest_chapter_url': 'https://www.bigee.cc/book/185469/50.html'
				},
				author: {
					id: "12235",
					name: "xrjj",
					img: 'https://img1.baidu.com/it/u=3622150954,2575811681&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=6f4c5c8870818612eb669c51c3ca2896'
				},
				commons: [{
					id: "12235",
					rate:2,
					// 阅读时间(分钟)
					readTime: 20,
					common: "其他都可以,就是希望错字可以改进",
					img: 'https://img1.baidu.com/it/u=1333417867,4012964063&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=91e2d58be9d5a229a46b2f52dabd84d8'
				}, {
					id: "12236",
					rate:5,
					// 阅读时间(分钟)
					readTime: 20,
					common: "目前为止还不错,保持现在水平",
					img: 'https://img0.baidu.com/it/u=2455899697,228475993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=250cf386e420d412aabd4de7e412398b'
				}, {
					id: "12237",
					rate:4,
					// 阅读时间(分钟)
					readTime: 350,
					common: "还可以,希望战力别崩,战场描写都能不错就更好了，加油，继续努力，我看好你哦",
					img: 'https://img0.baidu.com/it/u=3265037425,1108192406&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e89b0f98541f2041551612be5871eff'
				}, {
					id: "12238",
					rate:0,
					// 阅读时间(分钟)
					readTime: 200,
					common: "写的不行，不好看，剧情太差了",
					img: 'https://img0.baidu.com/it/u=3265037425,1108192406&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e89b0f98541f2041551612be5871eff'
				}],
				// 是否进行跳转
				to:true,

			};
		},
		onShow() {
			this.to = true
		},
		// navigate.vue页面接受参数
		onLoad: function (option) {
			this.currBookId = option.id;
			// 获取图书信息
			this.getBookInfo();
		},
		methods: {
			// 获取图书信息
			getBookInfo(){
				request.get("/business/book/" + this.currBookId)
					.then((res) => {
						this.book = res.data;
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "数据加载失败",
							icon: 'error'
						})
					})
			},
			// 根据时间(分钟)显示
			getShowTime(m){
				if(m < 30){
					return "不足30分钟"
				}else if(m >=30 && m <60){
					return m+"分钟";
				}else{
					return Math.floor(m/60)+"小时后";
				}
			},
			// 跳转到章节阅读页面
			touchMove(){
				if(this.to){
					this.to = false
					//在起始页面跳转到test.vue页面并传递参数
					uni.navigateTo({
						url: '/pages/read/read?id='+this.currBookId,
						animationType:'slide-in-right',
						animationDuration:400
					});
				}
			},
			// 拼接访问路径
			getFullImg(item){
				return request.config_url+ "/profile/novel/" + item.img;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #d9d2bf;
		width: 100%;
		height: 100vh;
		color: #625944;
		padding: 0rpx;

		.top {
			padding-top: 20%;
			text-align: center;
			color: #625944;

			#img {
				width: 200rpx;
			}

			.title {
				font-weight: 900;
				font-size: 20px;
			}

			.author {
				margin-top: 20rpx;

				#avator {
					border-radius: 20rpx;
					width: 30rpx;
				}
			}
		}

		.mid {
			margin-top: 30rpx;
			text-align: center;
		}

		.desc {
			margin: 40rpx;

			.tag {
				padding: 10rpx;
				background-color: #c5c2ac;
				margin-left: 10rpx;
				border-radius: 20rpx;
				font-size: 12rpx;
			}

			.clamp-text {
				margin-top: 10rpx;
				font-size: 25rpx;
				line-height: 1.7;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		// 评论
		.end {
			margin: 30rpx 60rpx;

			.commons {
				.common {
					margin-top: 30rpx;
				}
			}
		}
	}

	.avator {
		border-radius: 20rpx;
		width: 40rpx;
	}
</style>